<template>
  <div>
    <myheader></myheader>

    <section class="featured-block text-center">
      <div class="container">
        <div class="row">
          <div class="col-md-6 text-center">
            <!-- 关注商品的人及其数量 -->
            <span class="h-tag h-tag-yellow" @click="drawer = true"
              >该商品被{{ flownum }}人关注</span
            >
            <span
              class="h-tag h-tag-blue"
              @click="flow(1)"
              v-if="is_flow == false"
              >添加关注</span
            ><span
              class="h-tag h-tag-blue"
              @click="flow(0)"
              v-if="is_flow == true"
              >取消关注</span
            >
            <el-drawer
              title="这些用户关注了该商品"
              :visible.sync="drawer"
              :direction="direction"
              :before-close="handleClose"
              ><div class="demo-type">
                <div v-for="(item, index) in flowerlist" :key="index">
                  <el-avatar :size="100">{{ item.username }}</el-avatar>
                </div>
              </div>
            </el-drawer>
            <div class="product-image mt-3">
              <img class="img-fluid" :src="src" />
            </div>
            <br /><br />
            <div class="product-thumbnails">
              <!-- 用户评论 -->
              <div><h3>用户评论</h3></div>
              <div>
                <!-- element组件展示用户评论 -->
                <comments ref="comments" :commentlist="commentlist"></comments>
              </div>
              <br />
              <div class="container">
                <textarea v-model="content"></textarea>
                <br /><br />
                <Button color="green" @click="comment">上传评论</Button>
              </div>
            </div>
          </div>
          <div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
            <h2 class="mb-3 mt-0">{{ info.name }}</h2>
            <p class="lead mt-2 mb-3 primary-color">${{ info.price }}</p>
            <h5 class="mt-4">商品描述</h5>
            <br />
            <p>
              {{ info.desc }}
            </p>
            <p>颜色：{{ param.color }}</p>
            <p>规格：{{ param.size }}</p>
            <p>季节：{{ param.season }}</p>
            <router-link
              :to="{ path: '/editgood', query: { gid: this.$route.query.gid } }"
              v-if="utype == 1"
              >修改商品信息</router-link
            >
            <p><TagInput v-model="tags" :readonly="true"></TagInput></p>
            <h5 class="mt-5">Care Instructions</h5>
            <p>
              Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem
              malesuada magna mollis euismod.
            </p>
            <select class="custom-select form-control mt-4 mb-4">
              <option selected>Size</option>
              <option value="1">Small</option>
              <option value="2">Medium</option>
              <option value="3">Large</option>
            </select>

            <!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->

            <a
              href="javascript:void(0)"
              class="btn btn-full-width btn-lg btn-outline-primary"
              @click="add_cart"
            >
              加入购物车
            </a>
          </div>
        </div>
      </div>
    </section>

    <div class="divider"></div>

    <section class="products text-center"></section>

    <section class="products text-center">
      <div class="container">
        <h3 class="mb-4">Related Products</h3>
        <div class="row">
          <div class="col-sm-6 col-md-3 col-product">
            <figure>
              <img
                class="rounded-corners img-fluid"
                src="../assets/images/placeholder-product.jpg"
                width="240"
                height="240"
              />
              <figcaption>
                <div class="thumb-overlay">
                  <a href="#" title="More Info">
                    <i class="fas fa-search-plus"></i>
                  </a>
                </div>
              </figcaption>
            </figure>
            <h4><a href="#">Product Name</a></h4>
            <p><span class="emphasis">$19.00</span></p>
          </div>
          <div class="col-sm-6 col-md-3 col-product">
            <figure>
              <img
                class="rounded-corners img-fluid"
                src="../assets/images/placeholder-product.jpg"
                width="240"
                height="240"
              />
              <figcaption>
                <div class="thumb-overlay">
                  <a href="#" title="More Info">
                    <i class="fas fa-search-plus"></i>
                  </a>
                </div>
              </figcaption>
            </figure>
            <h4><a href="#">Product Name</a></h4>
            <p><span class="emphasis">$19.00</span></p>
          </div>
          <div class="col-sm-6 col-md-3 col-product">
            <figure>
              <img
                class="rounded-corners img-fluid"
                src="../assets/images/placeholder-product.jpg"
                width="240"
                height="240"
              />
              <figcaption>
                <div class="thumb-overlay">
                  <a href="#" title="More Info">
                    <i class="fas fa-search-plus"></i>
                  </a>
                </div>
              </figcaption>
            </figure>
            <h4><a href="#">Product Name</a></h4>
            <p><span class="emphasis">$19.00</span></p>
          </div>
          <div class="col-sm-6 col-md-3 col-product">
            <figure>
              <img
                class="rounded-corners img-fluid"
                src="../assets/images/placeholder-product.jpg"
                width="240"
                height="240"
              />
              <figcaption>
                <div class="thumb-overlay">
                  <a href="#" title="More Info">
                    <i class="fas fa-search-plus"></i>
                  </a>
                </div>
              </figcaption>
            </figure>
            <h4><a href="#">Product Name</a></h4>
            <p><span class="emphasis">$19.00</span></p>
          </div>
        </div>
      </div>
    </section>
    <myfooter></myfooter>
  </div>
</template>


 
<script>
import myheader from "./myheader";
import myfooter from "./myfooter";
import mycomments from "./comments";
export default {
  data() {
    return {
      info: [],
      src: "",
      gid: "",
      param: "",
      tags: [],
      utype: "",
      // 用户评论内容
      content: "",
      // 关注数
      flownum: "",
      // 关注者列表
      flowerlist: [],
      // 展示关注商品的人组件的参数
      drawer: false,
      direction: "rtl",
      // 商品评论列表
      commentlist: [],
      is_flow: false,
      // 购物车容器
      cartlist: []
    };
  },
  mounted: function() {
    // 获取商品信息
    this.utype = localStorage.getItem("type");
    var gid = this.$route.query.gid;
    this.axios({
      url: "http://localhost:8000/goodsinfo/",
      params: { gid: gid }
    }).then(res => {
      this.info = res.data.data;
      this.src = "http://localhost:8000/static/upload/" + res.data.data.img;
      this.gid = this.$route.query.gid;
      this.param = JSON.parse(res.data.data.param);
    });
    // 获取标签
    this.axios({
      url: "http://localhost:8000/gettags/",
      params: {
        gid: gid
      }
    }).then(res => {
      if (res.data) {
        this.tags = res.data.tags;
      } else {
        this.tags = ["暂无标签"];
      }
    });
    // 获取商品总关注数
    this.goods_flow();
    // 获取商品评论
    this.GetComments();
    // 增加商品浏览次数
    this.addcount();
    if (localStorage.getItem("cart")) {
      this.cartlist = JSON.parse(localStorage.getItem("cart"));
    } else {
      this.cartlist = [];
    }
  },
  methods: {
    // 提交评论
    comment: function() {
      if (this.content) {
        this.axios({
          url: "http://localhost:8000/insertcomment/",
          method: "post",
          data: this.qs.stringify({
            content: this.content,
            uid: localStorage.getItem("uid"),
            gid: this.gid
          })
        }).then(res => {
          this.$Message(res.data.msg);
          this.content = "";
          // 将评论内容添加都评论列表里(节省带宽)
          // this.commentlist.push({
          //   uid: localStorage.getItem("uid"),
          //   content: this.content
          // });
          this.GetComments();
        });
      } else {
        this.$Message("评论内容不能为空");
      }
    },
    // 获取商品总关注数
    goods_flow: function() {
      this.axios({
        url: "http://localhost:8000/goodsflow/",
        params: {
          gid: this.$route.query.gid
        }
      }).then(res => {
        this.flowerlist = res.data;
        this.flownum = res.data.length;
        // console.log(this.flowerlist)
        // 判断用户是否关注该商品
        for (let i of this.flowerlist) {
          if (i.username == localStorage.getItem("username")) {
            this.is_flow = true;
          } else {
            this.is_flow = false;
          }
        }
      });
    },
    //关闭弹出框
    handleClose(done) {
      done();
    },
    GetComments() {
      // 获取商品评论
      this.axios({
        url: "http://localhost:8000/commentlist/",
        params: {
          gid: this.$route.query.gid
        }
      }).then(res => {
        this.commentlist = res.data.comment;
      });
    },
    // 关注(取关)商品
    flow: function(value) {
      this.axios({
        url: "http://localhost:8000/getflow/",
        params: {
          uid: localStorage.getItem("uid"),
          gid: this.gid,
          type: value
        }
      }).then(res => {
        this.$Message(res.data.msg);
        if (res.data.msg == "关注成功") {
          this.is_flow = true;
          this.flownum += 1;
          this.flowerlist.push({ username: localStorage.getItem("username") });
        }
        if (res.data.msg == "请勿重复关注") {
          this.is_flow = true;
        }
        if (res.data.msg == "取消关注成功") {
          this.is_flow = false;
          this.flownum -= 1;
          var newlist = [];
          for (let i of this.flowerlist) {
            if (i.username != localStorage.getItem("username")) {
              newlist.push({ username: i.username });
              this.flowerlist = newlist;
            }
          }
        }
      });
    },
    // 增加商品浏览次数
    addcount: function() {
      this.axios({
        url: "http://localhost:8000/productviewtimes/",
        method: "POST",
        data: { gid: this.$route.query.gid }
      }).then(res => {});
    },
    // 加入购物车
    add_cart: function() {
      // 判断标识符
      var is_find = 0;
      // 遍历购物车
      for (let i = 0, l = this.cartlist.length; i < l; i++) {
        // 如果该商品在购物车列表里存在
        if (this.gid == this.cartlist[i]["gid"]) {
          // 将该商品的数量加1
          this.cartlist[i]["num"]++;
          is_find = 1;
          break;
        }
      }
      // 如果没找到
      if (is_find == 0) {
        // 将该商品放入购物车列表
        this.cartlist.push({
          name: this.info.name,
          img: this.info.img,
          gid: this.gid,
          price: this.info.price,
          num: 1
        });
      }
      // 存入localStorage
      localStorage.setItem("cart", JSON.stringify(this.cartlist));
      this.$Message("添加购物车成功");
    }
  },
  // 注册组件
  components: {
    myheader: myheader,
    myfooter: myfooter,
    comments: mycomments
  }
};
</script>
 
<style>
</style>